<template>
	<view class="">
		<svg height="100%" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
			<defs>
				<linearGradient id="circle_gradient" x1="50%" x2="50%" y2="100%" y1="0%">
					<stop offset="0%" stop-color="#B6509E" stop-opacity="1"></stop>
					<stop offset="70%" stop-color="#B6509E" stop-opacity="0"></stop>
				</linearGradient>
				<linearGradient id="line_gradient" x1="50%" x2="50%" y1="50%" y2="0%"
					gradientUnits="userSpaceOnUse">
					<stop offset="50%" stop-color="#d968eb" stop-opacity="1"></stop>
					<stop offset="100%" stop-color="#d968eb" stop-opacity="0"></stop>
				</linearGradient>
			</defs>
			<circle r="40%" cx="50%" cy="50%" fill="none" stroke="url(#circle_gradient)" opacity="30%">
				<animate attributeName="r" begin="0s" dur="4s" values="40%; 45%; 40%;" keyTimes="0; 0.5; 1"
					calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" fill="freeze" repeatCount="indefinite">
				</animate>
			</circle>
			<circle r="35%" cx="50%" cy="50%" fill="none" stroke="url(#circle_gradient)" opacity="50%">
				<animate attributeName="r" begin="0s" dur="4s" values="35%; 40%; 35%;" keyTimes="0; 0.5; 1"
					calcMode="spline" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1" fill="freeze" repeatCount="indefinite">
				</animate>
			</circle>
			<circle r="30%" cx="50%" cy="50%" fill="none" stroke="url(#circle_gradient)"></circle>
			<circle fill="#d968eb" r="4px" cx="50%" cy="35%"></circle>
			<line x1="50%" y1="35%" x2="50%" y2="0%" stroke="url(#line_gradient)"></line>
			<circle r="2.5px" cx="50%" cy="0%" fill="#d968eb">
				<animate id="line_5_y" attributeName="cy" begin="0s;line_5_y.end+5s" dur="1s" values="0%; 35%;"
					keyTimes="0; 1" calcMode="spline" keySplines="0 0 0.5 1" fill="freeze"></animate>
			</circle>
			<line x1="50%" y1="35%" x2="40%" y2="0%" stroke="url(#line_gradient)"></line>
			<circle r="2.5px" cx="40%" cy="0%" fill="#d968eb">
				<animate id="line_4_y" attributeName="cy" begin="0s;line_4_y.end+3s" dur="3s" values="0%; 35%;"
					keyTimes="0; 1" calcMode="spline" keySplines="0 0 0.5 1" fill="freeze"></animate>
				<animate id="line_4_x" attributeName="cx" begin="0s;line_4_x.end+3s" dur="3s" values="40%; 50%;"
					keyTimes="0; 1" calcMode="spline" keySplines="0 0 0.5 1" fill="freeze"></animate>
			</circle>
			<line x1="50%" y1="35%" x2="25%" y2="0%" stroke="url(#line_gradient)"></line>
			<circle r="2.5px" cx="25%" cy="0%" fill="#d968eb">
				<animate id="line_3_y" attributeName="cy" begin="0s;line_3_y.end+2s" dur="4s" values="0%; 35%;"
					keyTimes="0; 1" calcMode="spline" keySplines="0 0 0.5 1" fill="freeze"></animate>
				<animate id="line_3_x" attributeName="cx" begin="0s;line_3_y.end+2s" dur="4s" values="25%; 50%;"
					keyTimes="0; 1" calcMode="spline" keySplines="0 0 0.5 1" fill="freeze"></animate>
			</circle>
			<line x1="50%" y1="35%" x2="60%" y2="0%" stroke="url(#line_gradient)"></line>
			<circle r="2.5px" cx="60%" cy="0%" fill="#d968eb">
				<animate id="line_2_y" attributeName="cy" begin="2s;line_2_y.end+4s" dur="2s" values="0%; 35%;"
					keyTimes="0; 1" calcMode="spline" keySplines="0 0 0.5 1" fill="freeze"></animate>
				<animate id="line_2_x" attributeName="cx" begin="2s;line_2_x.end+4s" dur="2s" values="60%; 50%;"
					keyTimes="0; 1" calcMode="spline" keySplines="0 0 0.5 1" fill="freeze"></animate>
			</circle>
			<line x1="50%" y1="35%" x2="75%" y2="0%" stroke="url(#line_gradient)"></line>
			<circle r="2.5px" cx="75%" cy="0%" fill="#d968eb">
				<animate id="line_1_y" attributeName="cy" begin="0s;line_1_y.end+3s" dur="3s" values="0%; 35%"
					keyTimes="0; 1" calcMode="spline" keySplines="0 0 0.5 1" fill="freeze"></animate>
				<animate id="line_1_x" attributeName="cx" begin="0s;line_1_x.end+3s" dur="3s" values="75%; 50%"
					keyTimes="0; 1" calcMode="spline" keySplines="0 0 0.5 1" fill="freeze"></animate>
			</circle>
		</svg>
		
		<view class="fontBox">
			<view class="fontTxt">字体加粗描边css</view>
			<!-- 
				radius 控制边框大小 可以传入两个值,使用空格分离,分别表示横向与纵向的扩张大小
				flood-color 控制边框颜色
			 -->
			<svg width="0" height="0">
				    <filter id="dilate">
					        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1 2">
					</feMorphology>
					        <feFlood flood-color="#FFE431" flood-opacity="1" result="flood"></feFlood>
					        <feComposite in="flood" in2="DILATED" operator="in" result="OUTLINE"></feComposite>

					        <feMerge>
						            
						<feMergeNode in="OUTLINE" />
						            
						<feMergeNode in="SourceGraphic" />
						        
					</feMerge>
					    </filter>
			</svg>

			<!-- 某些手机端效果不好 -->
			<view class="fontTxt_0">字体加粗描边css</view>

			<view class="fontTxt_1">字体加粗描边css</view>

			<view class="fontTxt_2">字体加粗描边css</view>

			<view class="fontTxt_3">字体加粗描边css</view>
			<view class="fontTxt_3">css</view>

			<view class="fontTxt_4">10000</view>
		</view>


		<!-- 底部导航 -->
		<tabbar :current="2" />

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				num: '',
			}
		},
		onLoad() {

		},
		onShow() {
			this.init();
		},
		methods: {
			init() {

			},

		}
	}
</script>
<script lang="ts">
	// 控制台输出
	// 自定义样式的实现，其实主要是靠%c 占位符添加 CSS 样式实现的！
	console.log('%c 这是一段测试控制台输出的美化文字', 'font-size:20px;color:red')

	// 美化打印实现方法
	const prettyLog = () => {
		// 仅在开发环境使用 isProduction
		// const isProduction = import.meta.env.MODE === 'production';

		const isEmpty = (value : any) => {
			return value == null || value === undefined || value === '';
		};
		const prettyPrint = (title : string, text : string, color : string) => {
			// if (isProduction) return;
			console.log(
				`%c ${title} %c ${text} %c`,
				`background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,
				`border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};`,
				'background:transparent'
			);
		};
		const info = (textOrTitle : string, content = '') => {
			const title = isEmpty(content) ? 'Info' : textOrTitle;
			const text = isEmpty(content) ? textOrTitle : content;
			prettyPrint(title, text, '#909399');
		};
		const error = (textOrTitle : string, content = '') => {
			const title = isEmpty(content) ? 'Error' : textOrTitle;
			const text = isEmpty(content) ? textOrTitle : content;
			prettyPrint(title, text, '#F56C6C');
		};
		const warning = (textOrTitle : string, content = '') => {
			const title = isEmpty(content) ? 'Warning' : textOrTitle;
			const text = isEmpty(content) ? textOrTitle : content;
			prettyPrint(title, text, '#E6A23C');
		};
		const success = (textOrTitle : string, content = '') => {
			const title = isEmpty(content) ? 'Success ' : textOrTitle;
			const text = isEmpty(content) ? textOrTitle : content;
			prettyPrint(title, text, '#67C23A');
		};
		const table = () => {
			const data = [
				{ id: 1, name: 'Alice', age: 25 },
				{ id: 2, name: 'Bob', age: 30 },
				{ id: 3, name: 'Charlie', age: 35 }
			];
			console.log(
				'%c id%c name%c age',
				'color: white; background-color: black; padding: 2px 10px;',
				'color: white; background-color: black; padding: 2px 10px;',
				'color: white; background-color: black; padding: 2px 10px;'
			);

			data.forEach((row : any) => {
				console.log(
					`%c ${row.id} %c ${row.name} %c ${row.age} `,
					'color: black; background-color: lightgray; padding: 2px 10px;',
					'color: black; background-color: lightgray; padding: 2px 10px;',
					'color: black; background-color: lightgray; padding: 2px 10px;'
				);
			});
		};
		const picture = (url : string, scale = 1) => {
			// if (isProduction) return;
			const img = new Image();
			img.crossOrigin = 'anonymous';
			img.onload = () => {
				const c = document.createElement('canvas');
				const ctx = c.getContext('2d');
				if (ctx) {
					c.width = img.width;
					c.height = img.height;
					ctx.fillStyle = 'red';
					ctx.fillRect(0, 0, c.width, c.height);
					ctx.drawImage(img, 0, 0);
					const dataUri = c.toDataURL('image/png');

					console.log(
						`%c sup?`,
						`font-size: 1px;
	                    padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor((img.width * scale) / 2)}px;
	                    background-image: url(${dataUri});
	                    background-repeat: no-repeat;
	                    background-size: ${img.width * scale}px ${img.height * scale}px;
	                    color: transparent;
	                    `
					);
				}
			};
			img.src = url;
		};

		// retu;
		return {
			info,
			error,
			warning,
			success,
			picture,
			table
		};
	};
	// 创建打印对象
	const log = prettyLog();

	log.info('注意看', '这是个男人叫小帅!');

	log.error('奥德彪', '出来的时候穷 生活总是让我穷 所以现在还是穷。');

	log.warning('奥德彪', '我并非无路可走 我还有死路一条! ');

	log.success('奥德彪', '钱没了可以再赚，良心没了便可以赚的更多。 ');

	log.picture('https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0514%2Fd0ea93ebj00sdgx56001xd200u000gtg00hz00a2.jpg&thumbnail=660x2147483647&quality=80&type=jpg');

	const data = [
		{ id: 1, name: 'Alice', age: 25 },
		{ id: 2, name: 'Bob', age: 30 },
		{ id: 3, name: 'Charlie', age: 35 }
	];

	console.table(data);
</script>

<style lang="scss" scoped>
	.fontBox {
		&>view {
			font-size: 50rpx;
			letter-spacing: 14rpx;
			font-weight: bold;
			color: #fff;

			&:nth-child(1) {
				margin-bottom: 0 !important;
			}

			&:nth-child(n) {
				margin-bottom: 40rpx;
			}
		}

		.fontTxt {
			-webkit-text-stroke: 2px #5B1D1D;
			filter: url(#dilate);
		}

		.fontTxt_0 {
			// background: -webkit-linear-gradient(#F9C784, #DD7D6A);
			-webkit-text-stroke: 2px #5B1D1D;
			background: #fff;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.fontTxt_1 {
			filter: drop-shadow(0 0 0.6px #5B1D1D) drop-shadow(0 0 0.6px #5B1D1D) drop-shadow(0 0 0.8px #FFE431) drop-shadow(0 0 0.8px #FFE431)
		}

		.fontTxt_2 {
			text-shadow: 3rpx -7rpx 0rpx #FFE431;
			-webkit-text-stroke: 4rpx #5B1D1D;
		}

		.fontTxt_3 {
			color: #000;
			-webkit-text-stroke: 3px transparent;
			background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, purple) top left / 100% 100%;
			-webkit-background-clip: text;
		}

		.fontTxt_4 {
			font-size: 60rpx;
			letter-spacing: 1rpx;
			-webkit-text-stroke: 10rpx #FFE431;
			color: #fff;
			position: relative;

			&:before {
				content: "10000";
				position: absolute;
				-webkit-text-stroke: 2rpx #5B1D1D;
				color: #fff;
			}
		}
	}
</style>